<template>
  <section>
    <div :class="classFlag"
         style="display: inline;">
      {{
        row[objName] && row[objName][fieldName] ? formatNumber(row[objName][fieldName]) : 0
      }}
    </div>
    <icon-svg v-if="quoteFlag"
              slot="reference"
              class-name="iconClass pointer"
              icon-name="tishi"
              @click="dialogVisible = true" />
    <free-detail v-if="dialogVisible"
                 :dialog-visible.sync="dialogVisible"
                 :waybill-id="row.waybillId" />
  </section>
</template>

<script>
import FreeDetail from "./FreeDetail.vue";
export default {
  name: "BillFee",
  components: {
    FreeDetail
  },
  props: {
    row: {
      type: Object,
      default: () => { }
    },
    fieldName: {
      type: String,
      default: ""
    },
    objName: {
      type: String,
      default: ""
    },
    quoteFlag: {
      type: Boolean,
      default: false
    },
    classFlag: {
      type: String,
      default: ""
    }
  },
  data () {
    return {
      dialogVisible: false
    };
  },
  computed: {
    formatNumber () {
      return num => num ? Number(num).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') : 0;
    }
  }
};
</script>
<style scoped>
.red {
  color: var(--prev-color-text-red);
}
</style>
